<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Coda rip-off</title>
	<script src="../../../commons/mootools.v1.11.js" type="text/javascript" charset="utf-8"></script>
	<script src="../carousel.js" type="text/javascript" charset="utf-8"></script>
	<script src="../carousel.slick.js" type="text/javascript" charset="utf-8"></script>
	
	<style type="text/css" media="screen">
		
		body {
			font-family: "Lucida Grande";
		}

		.container {
			width: 838px;
			text-align: left;
			margin: 0 auto;
			position: relative;
			background: url(http://www.panic.com/coda/img/header-shadow.gif) no-repeat 0 318px;
		}
		
		/* The toolbar for the content box */

		ul#toolbar {
			height: 52px;
			width: 750px;
			text-align: center;
			list-style: none;
			margin: 0 auto 0 auto;
			clear: both;
			/* border-bottom: 1px solid #ccc;	*/
			}

		#toolbar li {
			float: left;
			text-indent: -9999px;
			}

		#toolbar li a {
			height: 52px;
			display: block;
			outline: 0;
			}

		#toolbar li.active {
			/* border-bottom: 1px solid #f2f2f2; */
			background-position: top;
			}

		#toolbar li.inactive {
			background-position: bottom;
			}

		#toolbar li:hover {
			background-position: top;
			}

		#toolbar li#sites-tab {
			width: 122px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-sites.png);
			}

		#toolbar li#editor-tab {
			width: 95px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-editor.png);
			}

		#toolbar li#preview-tab {
			width: 106px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-preview.png);
			}

		#toolbar li#css-tab {
			width: 102px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-css.png);
			}

		#toolbar li#terminal-tab {
			width: 113px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-terminal.png);
			}

		#toolbar li#books-tab {
			width: 118px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-books.png);
			}

		#toolbar li#files-tab {
			width: 94px;
			background-image: url(http://www.panic.com/coda/img/toolbar_tabs-files.png);
			}


		/* The slide-y content box thingy */

		#frame, #frame div.button, #scroller, .section { height: 57em; }

		#frame {
			overflow: hidden;
			margin: 0 auto;
			width: 838px;
			position: relative;
			}

		#frame div.button {
			position: absolute;
			top: 40%;
			}

		div.button#left { left: 0; }
		div.button#right { right: 0; }

		#scroller {
			width: 750px;
			margin: 0 auto;	
			border-top: 1px solid #fff;
			background: #fff url(http://www.panic.com/coda/img/content_pane-gradient.gif) bottom repeat-x;
			overflow: hidden;
			}

		#content {
			width: 5250px;
			}

		.section {
			width: 710px;
			margin: 20px;
			float: left;
			}

		.section h2, .section h3 {
			color: #444;
			font-weight: normal;
			font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
			font-size: 22px;
			line-height: 22px;
			margin-bottom: 5px;
			}

		.section h2, .section#sites-pane h3 {
			color: #072453;
			}

		.section p, .section li {
			margin: 0 0 20px 0;
			font-size: 14px;
			line-height: 22px;
			}

		.section img {
			float: left;
			margin-right: 20px;
			margin-bottom: 20px;
			}

		#sites-paper {
			}

		#sites-publish {
			float: right;
			margin-top: 20px;
			margin-bottom: 20px;
			margin-left: 10px;
			margin-right: 0;
			}

		#files-browser {
			float: right;
			margin: 0 0 20px 20px;
			}

		#files-transmit {
			}

		ul#editor-features {
			list-style: none;
			display: block;
			}

		ul#editor-features li {
			list-style: none;
			display: block;
			}

		li#editor-collab {
			padding-left: 48px;
			background: url(http://www.panic.com/coda/img/editor-collab.gif) top left no-repeat;
			}

		li#editor-clips {
			padding-left: 48px;
			background: url(http://www.panic.com/coda/img/editor-clips.gif) top left no-repeat;
			}

		#editor-clips_hud {
			float: right;
			margin-right: 0;
			margin-left: 10px;
			}

		li#editor-token {
			padding-left: 48px;
			background: url(http://www.panic.com/coda/img/editor-token.gif) top left no-repeat;
			}

		.token {
			white-space: nowrap;
			}

		.token img {
			float: none;
			display: inline;
			margin: 0 0 -2px 0;
			line-height: 14px;
			}

		#preview-dom {
			}

		#css-gui_txt {
			margin-bottom: 40px;
			}

		#css-icons {
			float: right;
			margin-right: 0;
			margin-left: 10px;
			margin-bottom: 0;
			}

		#terminal-icon {
			margin-bottom: 0;
			margin-top: -10px;
			}

		#terminal-colors {
			float: right;
			margin-left: 10px;
			}

		#books-thebook {
			margin-right: 30px;
			}
	
		/* Screenshots */

		ul.screenshots {
			list-style: none;
			margin: 10px auto 10px auto;
			clear: both;
			text-align: center;
			}

		ul.screenshots li {
			list-style: none;
			display: inline;
			width: 110px;
			height: 105px;
			}

		ul.screenshots li img {
			float: none;

			}

		/* Badges */

		ul#badges {
			list-style: none;
			height: 60px;
			}

		#badges li {
			float: left;
			list-style: none;
			height: 60px;
			}

		#coda_badge-universal {
			width: 93px;
			}

		#coda_badge-macuser {
			width: 159px;
			padding-left: 61px;
			padding-top: 5px;
			}		

		#coda_badge-ada {
			width: 207px;
			padding-left: 61px;
			}

		#coda_badge-softpedia {
			width: 106px;
			padding-left: 61px;
			}
	</style>
	
	<script type="text/javascript" charset="utf-8">
		window.addEvent("domready", function() {
			var carousel = new SlickCarousel('scroller', '.section', {
				start_index: 2,
				menu_class: 'tab',
				scroll_right: 'right',
				scroll_left: 'left',
				duration: 1500,
				offset: {'x': -20, 'y': 0},
				transition: Fx.Transitions.Quad.easeInOut
			});

		});	
	</script>
	
</head>

<body>

	<!-- The Toolbar -->

	<ul id="toolbar">
		<li id="sites-tab" class="tab active"><a href="#sites-pane" title="Sites">Sites</a></li>
		<li id="files-tab" class="tab inactive"><a href="#files-pane" title="Files">Files</a></li>
		<li id="editor-tab" class="tab inactive"><a href="#editor-pane" title="Editor">Editor</a></li>
		<li id="preview-tab" class="tab inactive"><a href="#preview-pane" title="Preview">Preview</a></li>
		<li id="css-tab" class="tab inactive"><a href="#css-pane" title="CSS">CSS</a></li>

		<li id="terminal-tab" class="tab inactive"><a href="#terminal-pane" title="Terminal">Terminal</a></li>
		<li id="books-tab" class="tab inactive"><a href="#books-pane" title="Books">Books</a></li>
	</ul>	 

	<hr />

	<!-- The Incredible Horizontal-Scrolling Content Box by Panic, Inc. -->

				<div id="frame"><!-- Contains the forward/back buttons, hides the scrollbar -->

					<div class="button" id="left"><img src="http://www.panic.com/coda/img/button-left.gif" alt="left scroll arrow" onmouseover="this.src = 'http://www.panic.com/coda/img/button-left-rollover.gif'" onmouseout="this.src = 'http://www.panic.com/coda/img/button-left.gif'" /></div>

					<div id="scroller"><!-- Contains the horizontal scrollbar -->


						<div id="content"><!-- Very wide to contain all the sections side-by-side -->


							<!-- Sites -->

							<div class="section" id="sites-pane">

								<p>So, we code web sites by hand.  And one day, it hit us: our web workflow was wonky.  We&#8217;d have our text editor open, with Transmit open to save files to the server.  We&#8217;d be previewing in Safari, running queries in Terminal, using a CSS editor, and reading references on the web.  <em>&#8220;This could be easier,&#8221;</em> we realized.  <em>&#8220;And much cooler.&#8221;</em></p>

								<img src="http://www.panic.com/coda/img/sites-paper.jpg" title="I'm your site." alt="site icon" id="sites-paper" />


								<h2>Sites: double click, start work.</h2>
								<p>Your Coda experience starts with &#8220;Sites&#8221;.  Think of them as uber-favorites on cute little pieces of paper.  When you&#8217;re ready to start work, just double click a site &#8212; Coda will <strong>instantly restore itself exactly as you left it</strong>, connecting to your server, restoring any splits and tabs, and allowing you to code, pronto.</p>

								<img src="http://www.panic.com/coda/img/sites-publish.gif" title="One-click publishing." alt="the publish button" id="sites-publish" />

								<h3>One-click publishing.</h3>

								<p>Work on websites locally, then publish them remotely to your server?  <strong>Coda&#8217;s sites will automatically track your local changes</strong>, and do it all for you.  Just hit the big, shiny &#8220;Publish All&#8221; button.  Ka-plam! Up they go.</p>

								<h4 class="hide">Screenshots</h4>
								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/sites-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/sites-screenshot_01-sm.jpg" alt="Sites screenshot #1" /></a></li>
									<li><a href="http://www.panic.com/coda/img/sites-screenshot_02.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/sites-screenshot_02-sm.jpg" alt="Sites screenshot #2" /></a></li>

									<li><a href="http://www.panic.com/coda/img/sites-screenshot_03.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/sites-screenshot_03-sm.jpg" alt="Sites screenshot #3" /></a></li>
								</ul>
							</div><!-- end div.section#sites-pane -->


							<!-- Files -->

							<div class="section" id="files-pane">

								<img src="http://www.panic.com/coda/img/files-browser.png" title="The space of a sidebar" alt="file browser" id="files-browser" />

								<h2>The power of Transmit.  The space of a sidebar.</h2>


								<p>What happens when you take the flexibility, power, and compatibility of Transmit, then cram it into a sidebar?  You get a full-featured, built-in file browser, familiar and awesome.  Supporting <strong>FTP</strong>, <strong>SFTP</strong>, <strong>FTP+SSL</strong>, <strong>and WebDAV</strong>, you can connect to virtually any file server imaginable without breaking a sweat.  Edit files remotely, directly.  Copy. Upload.  Rename.  Whatever.  Sure, you'll still launch Transmit to do serious transferring with a bit more breathing room &#8212; but when you&#8217;re building websites, this sidebar rocks.</p>

								<img src="http://www.panic.com/coda/img/files-transmit.png" title="The power of Transmit" alt="Transmit icon" id="files-transmit" />

								<h3>Faster than ever.</h3>


								<p>Coda is the first application to use our new, next-generation <em>Transmit Turbo</em> engine.  With monumentally improved speed, particularly when working with large numbers of files, your transfers will be done in the blink of an eye... well, unless you&#8217;re on a modem. <!-- <code>NO CARRIER</code> --></p> 

								<h4 class="hide">Screenshots</h4>
								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/files-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/files-screenshot_01-sm.jpg" alt="Files screenshot #1" /></a></li>
								</ul>
							</div><!-- end div.section#files-pane -->



							<!-- Editor -->

							<div class="section" id="editor-pane">
								<h2>Elegant and powerful text editing.</h2>

								<p>We&#8217;ve put together one of the most graceful and feature-packed text editors on the Mac, specifically for maximum hand-coding hotness.  It&#8217;s got what you expect: <strong>syntax coloring, line numbering, auto completing, block editing, international support, etc.</strong>  But the stuff we&#8217;ve built on top will really flip your editing lid.  To wit:</p>


								<ul id="editor-features">
									<li id="editor-collab"><strong>Collaboration.</strong> Using the innovative <a href="http://www.codingmonkeys.de/subethaengine/" target="_new">Subetha Engine</a>, edit code simultaneously with a co-worker in the next cube &#8212; or across the globe.  Share documents via Bonjour, track changes, or just sneak in dumb jokes.</li>

									<li id="editor-clips"><img src="http://www.panic.com/coda/img/editor-clips_hud.gif" title="The clips HUD window" alt="clips window" id="editor-clips_hud" /> <strong>Clips.</strong> A friendly floating window allows you to insert your frequently used text snippets just by clicking, dragging, or tab-triggering.  Nice!  Even include a special placeholder icon that will be replaced by your current selection.</li>


									<li id="editor-token"><strong>Revolutionary Find/Replace.</strong> The power of Grep with drag and drop simplicity? It's a Coda first. Want to swap the width and height tags in all of your images?  It&#8217;s as simple as searching for <em class="token">width=&#8220;<img src="http://www.panic.com/coda/img/editor-token1.png" alt="replacement token"/>&#8221; height=&#8220;<img src="http://www.panic.com/coda/img/editor-token2.png" alt="replacement token"/>&#8221;</em> and replacing it with <em class="token">width=&#8220;<img src="http://www.panic.com/coda/img/editor-token2.png" alt="replacement token" />&#8221; height=&#8220;<img src="http://www.panic.com/coda/img/editor-token1.png" alt="replacement token" />&#8221;</em>.  That&#8217;s it: Coda does the rest.  Drag the tokens where you need them, and use as many as you want.  (Hard core users can still use regular expressions directly.)</li>
								</ul>


								<h4 class="hide">Screenshots</h4>
								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/editor-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/editor-screenshot_01-sm.jpg" alt="Editor screenshot #1" /></a></li>
									<li><a href="http://www.panic.com/coda/img/editor-screenshot_02.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/editor-screenshot_02-sm.jpg" alt="Editor screenshot #2" /></a></li>
									<li><a href="http://www.panic.com/coda/img/editor-screenshot_03.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/editor-screenshot_03-sm.jpg" alt="Editor screenshot #3" /></a></li>
									<li><a href="http://www.panic.com/coda/img/editor-screenshot_04.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/editor-screenshot_04-sm.jpg" alt="Editor screenshot #4" /></a></li>
								</ul>
							</div><!-- end div.section#editor-pane -->


							<!-- Preview -->

							<div class="section" id="preview-pane">
								<h2>Preview for reals.</h2>
								<p>You&#8217;re writing code: you want to see what it looks like.  Thanks to <em>Apple&#8217;s WebKit</em>, we&#8217;ll show your site exactly as it looks like in Safari, even as you type.  Working on a file on a remote server?  We&#8217;ll update the preview automatically the moment you hit &#8220;Save&#8221;.  The hardest part?  Breaking your old habits!</p>


								<img src="http://www.panic.com/coda/img/preview-dom.gif" title="DOM inspector" alt="DOM inspector" id="preview-dom" />

								<h3>Visualize your layout.</h3>
								<p>Turn on Coda&#8217;s &#8220;DOM Inspector&#8221; to get a <em>visual look at your site&#8217;s element hierarchy</em>.  Hover over an element to see how it fits in the page as a whole.  The DOM trail in the bottom bar offers an instant glance at how your page fits together.</p>

								<h3>Javascript console, too.</h3>

								<p>If your Javascript occasionally has a bug or two or 162, Coda&#8217;s Preview can help you out with its built-in Javascript console, showing you relevant errors and line numbers.  It even supports console.log(), the best debugging thing created since ever.</p>

								<h4 class="hide">Screenshots</h4>
								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/preview-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/preview-screenshot_01-sm.jpg" alt="Preview screenshot #1" /></a></li>
								</ul>
							</div><!-- end div.section#preview-pane -->


							<!-- CSS -->


							<div class="section" id="css-pane">
								<h2>Create beautiful CSS.</h2>
								<p>Using a separate program to design your stylesheets?  That&#8217;s crazy stuff!  We&#8217;ve built a fully-featured CSS editor directly into Coda, giving you all the tools you need to create the world&#8217;s most beautiful layout.  It&#8217;s like getting a second, full-featured application thrown in for free!</p>

								<img src="http://www.panic.com/coda/img/css-gui_txt.gif" title="CSS view switcher" alt="CSS view switching buttons" id="css-gui_txt" />

								<h3>Visual? Text? Edit your way.</h3>

								<p>Coda gives you a choice of <em>two editing modes</em> when working on your CSS.  In visual mode, you&#8217;ll get convenient GUI controls that let you edit your style sheets with point and click simplicity.  With text mode, your CSS styles are organized and you can edit the details, hard-core style, directly.</p>

								<img src="http://www.panic.com/coda/img/css-icons.png" title="CSS icons" alt="CSS icons" id="css-icons" />

								<h3>Easier than ever.</h3>
								<p>Organized cleanly and efficiently, your CSS styles become a series of easy-to-understand groups instead of a scramble of hard-to-parse text.  And don&#8217;t forget that you can create a vertical split, and throw your source code on the left, to immediately see your CSS code changes as you adjust.</p>

								<h4 class="hide">Screenshots</h4>

								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/css-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/css-screenshot_01-sm.jpg" alt="CSS screenshot #1"  /></a></li>
									<li><a href="http://www.panic.com/coda/img/css-screenshot_02.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/css-screenshot_02-sm.jpg" alt="CSS screenshot #2"  /></a></li>
								</ul>
							</div><!-- end div.section#css-pane -->


							<!-- Terminal -->

							<div class="section" id="terminal-pane">
								<h2>Terminal: built right in.</h2>

								<p>OK, it&#8217;s not very sexy.  In fact, it&#8217;s quite the opposite.  But Coda is all about the little things that make your web development a squidgeon easier.  If you need to <span class="caps">SSH</span> into a server and run some MySQL queries, or restart Apache, or debug some <span class="caps">PHP</span> in real time, there&#8217;s only one way you&#8217;re gonna do it: terminal.  <em>Coda&#8217;s got a terminal one mouse click away.</em></p>

								<img src="http://www.panic.com/coda/img/terminal-icon.png" title="It's a terminal!" alt="terminal icon" id="terminal-icon" />


								<!--h3>cat /usr/share/dict/web2 | grep 'bells\|whistle'</h3-->
								<h3>egrep 'bells|whistle' /usr/share/dict/web2</h3>
								<p>Features?  Our terminal has &#8217;em.  Connect to a local shell or connect via <span class="caps">SSH</span> to a remote server.  Put a Terminal in a split, or put a Terminal in its own tab.  Copy and paste from the output, or scroll back into the buffer.  It&#8217;s a terminal!  And it&#8217;s convenient!</p>

								<img src="http://www.panic.com/coda/img/terminal-colors.png" title="Terminal colors" alt="colorwheel" id="terminal-colors" />

								<h3>export CLICOLOR=1</h3>

								<p>Wait! There&#8217;s kind of more! <span class="caps">ANSI</span> colors also work!  You can also, via the preferences, change the font and background colors, or the terminal font itself.  Unfortunately, you can&#8217;t yet set the background to a picture of Arwyn.  But e-mail us, we&#8217;ll always consider it.</p>

								<h4 class="hide">Screenshots</h4>
								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/terminal-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/terminal-screenshot_01-sm.jpg" alt="Terminal screenshot #1" /></a></li>
								</ul>

							</div><!-- end div.section#terminal-pane -->


							<!-- Books -->

							<div class="section" id="books-pane">
								<h2>Built in reference.</h2>
								<p>Sure, the web is awesome: it knows everything about everything.  But it&#8217;s not always organized, or well designed, so it&#8217;s hard to find clean, consistent reference for your web needs &#8212; some <span class="caps">HTML</span> help is hard to search, or <span class="caps">CSS</span> help is missing critical styles.  We want to fix that, and give you the best reference possible.</p>


								<img src="http://www.panic.com/coda/img/books-thebook.gif" title="A real book" alt="reference book" id="books-thebook" />

								<h3>A real book.  At your virtual fingertips.</h3>
								<p>We worked with the nice folks at No Starch Press to include their super-complete web reference book &#8212; <strong>The Web Programmer&#8217;s Desk Reference</strong>, by Lazaro Issi Cohen and Joseph Issi Cohen &#8212; right into Coda.  We reformatted the book's content into a clean, Coda-like style that you can search, then we tied the reference into the editor itself.  The book normally costs $60 at your local book store.  But for you?  It&#8217;s free, and built-in.  All part of that Coda magic.  <i>(Internet access required to view books.)</i></p>

								<h3><span class="caps">HTML</span>, CSS, Javascript, and <span class="caps">PHP</span></h3>

								<p>It&#8217;s all built in &#8212; and we hope to add even more reference in the future.</p>

								<h4 class="hide">Screenshots</h4>
								<ul class="screenshots">
									<li><a href="http://www.panic.com/coda/img/books-screenshot_01.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/books-screenshot_01-sm.jpg" alt="Books screenshot #1" /></a></li>
									<li><a href="http://www.panic.com/coda/img/books-screenshot_02.jpg" rel="zoom:"><img src="http://www.panic.com/coda/img/books-screenshot_02-sm.jpg" alt="Books screenshot #2" /></a></li>
								</ul>

							</div><!-- end div.section#books-pane -->

						</div><!-- end div#content -->

					</div><!-- end div.scroller -->

					<div class="button" id="right"><img src="http://www.panic.com/coda/img/button-right.gif" alt="right scroll arrow" onmouseover="this.src = 'http://www.panic.com/coda/img/button-right-rollover.gif'" onmouseout="this.src = 'http://www.panic.com/coda/img/button-right.gif'" /></div>

				</div><!-- end div#frame -->

</body>
</html>
